<template>
    <Layout title="商品列表" :footer="false">
        <van-dropdown-menu>
            <van-dropdown-item
                v-model="score"
                @change="onDropChange('score', $event)"
                title="人气"
                :options="scoreOption"
            />
            <van-dropdown-item
                v-model="sales"
                @change="onDropChange('sales', $event)"
                title="销量"
                :options="salesOption"
            />
            <van-dropdown-item
                v-model="price"
                @change="onDropChange('price', $event)"
                title="价格"
                :options="priceOption"
            />
        </van-dropdown-menu>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                @load="onLoad"
            >
                <van-grid :border="true" :center="false" :column-num="2">
                    <van-grid-item
                        v-for="(item, index) in goodList"
                        :key="index"
                        @click="$router.push('/goodLists/'+item.id)"
                    >
                        <van-image :src="item.pics[0]"></van-image>
                        <h3>{{ item.name }}</h3>
                        <p>
                            <span class="price1">
                                {{
                                    item.is_promote
                                        ? item.promote_price
                                        : item.price
                                }}
                            </span>
                            <span class="price2">{{ item.price }}</span>
                        </p>
                        <img
                            v-if="item.is_promote"
                            class="promotion"
                            src="@/assets/images/home-promotion.png"
                        />
                    </van-grid-item>
                </van-grid>
            </van-list>
        </van-pull-refresh>
    </Layout>
</template>

<script src="./js/list.js"></script>
<style lang="less" scoped src="./less/list.less"></style>